<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>DOM中css操作</title>
    <style type="text/css">
    .blue{
        color: #00f;
    }
    </style>
    <script type="text/javascript" src="JS/jquery-3.3.1.js"></script>
    <script>
    $(function(){
        $("#btn1").click(function(){
            $(".blue").removeClass("blue");
        });

        $("#btn2").click(function(){
            $("h1,p").addClass("blue");
        });

        $("#btn3").click(function(){
            $("h1,p").toggleClass("blue");
        });
    });
    </script>
</head>
<body>
    <h1 class="blue">标题1</h1>
    <p class="blue">这是蓝色文字段落</p>
    <p>这是普通文字段落</p>
    <br>
    <button id="btn1">移除样式</button>
    <button id="btn2">增加样式</button>
    <button id="btn3">切换样式</button>
</body>
</html>